<template>
  <div
    class="comp-data-preview"
    :class="{
      fix: beforeAfterModes.includes(PreviewAction) && beforeColumns.length > 1,
    }"
  >
    <template v-if="dataset && dataset.length > 0">
      <div
        v-if="beforeAfterModes.includes(PreviewAction)"
        class="preview-box"
        :class="{
          keyword: isKeywordMode,
          'selected-null': isBeforeAfterSelectNullCell,
          'mutiple-mode': beforeColumns.length > 1 || afterColumns.length > 1,
          ext: cellMode === 'ext',
        }"
      >
        <div class="left">
          <div class="header">
            操作前
          </div>
          <div class="table-box">
            <div
              class="table-preview-before"
              :class="{
                mutiple: beforeColumns.length > 1,
                'del-all': cellMode === 'del-all',
              }"
              :style="{
                'min-width': `${beforeColumns.length * 100 + 40}px`,
              }"
            >
              <div class="tb-head">
                <div
                  v-for="(col, i) in beforeColumns"
                  :key="i"
                  class="th"
                  :title="col.name"
                >
                  {{ col.name }}
                </div>
              </div>
              <div v-for="(item, i) in dataset" :key="i" class="tr">
                <div
                  v-for="(col, j) in beforeColumns"
                  :key="j"
                  class="td"
                  :class="{
                    null: [undefined, null, ''].includes(item[col.name]),
                  }"
                >
                  <a-tooltip v-if="isKeywordMode" class="tooltip-fix">
                    <template slot="title">
                      <span
                        v-html="
                          [undefined, null, ''].includes(item[col.name])
                            ? 'Null'
                            : item[col.name]
                        "
                      ></span>
                    </template>
                    <span
                      v-html="
                        [undefined, null, ''].includes(item[col.name])
                          ? 'Null'
                          : item[col.name]
                      "
                    ></span>
                  </a-tooltip>
                  <a-tooltip v-else class="tooltip-fix">
                    <template slot="title">
                      <span
                        >{{
                          [undefined, null, ''].includes(item[col.name])
                            ? 'Null'
                            : item[col.name]
                        }}
                      </span>
                    </template>
                    <span
                      >{{
                        [undefined, null, ''].includes(item[col.name])
                          ? 'Null'
                          : item[col.name]
                      }}
                    </span>
                  </a-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="header">
            操作后
          </div>
          <div class="table-box">
            <div
              class="table-preview-after"
              :class="{
                'del-all': cellMode === 'del-all',
              }"
              :style="{
                'min-width': `${afterColumns.length * 100 + 40}px`,
              }"
            >
              <div class="tb-head">
                <div
                  v-for="(col, i) in afterColumns"
                  :key="i"
                  class="th"
                  :title="
                    [null, '', undefined].includes(col.name) ? 'null' : col.name
                  "
                >
                  {{
                    [null, '', undefined].includes(col.name) ? 'null' : col.name
                  }}
                </div>
              </div>
              <div v-for="(item, i) in afterDataset" :key="i" class="tr">
                <div
                  v-for="(col, j) in afterColumns"
                  :key="j"
                  class="td"
                  :class="{
                    null: item[`${col.name}_$$$beforeIsNull`],
                  }"
                >
                  <a-tooltip v-if="isKeywordMode" class="tooltip-fix">
                    <template slot="title">
                      <span
                        v-html="
                          [undefined, null, ''].includes(item[col.name])
                            ? 'Null'
                            : item[col.name]
                        "
                      ></span>
                    </template>
                    <span
                      v-html="
                        [undefined, null, ''].includes(item[col.name])
                          ? 'Null'
                          : item[col.name]
                      "
                    ></span>
                  </a-tooltip>
                  <a-tooltip v-else class="tooltip-fix">
                    <template slot="title">
                      <span
                        >{{
                          [undefined, null, ''].includes(item[col.name])
                            ? 'Null'
                            : item[col.name]
                        }}
                      </span>
                    </template>
                    <span
                      >{{
                        [undefined, null, ''].includes(item[col.name])
                          ? 'Null'
                          : item[col.name]
                      }}
                    </span>
                  </a-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-else-if="selectNullCellMode.includes(PreviewAction)"
        class="select-null-cell-box"
      >
        <div class="header">{{ columns[0] ? columns[0].name : '' }}</div>
        <div class="content">
          <div
            v-for="(item, i) in dataset"
            :key="i"
            class="cell"
            :class="{
              null: [undefined, null, ''].includes(item[columns[0].name]),
            }"
          >
            {{
              [undefined, null, ''].includes(item[columns[0].name])
                ? 'Null'
                : item[columns[0].name]
            }}
          </div>
        </div>
      </div>
      <UTable
        v-else
        size="small"
        :border="false"
        :class="{
          'delete-all': cellMode === 'del-all',
          'select-all': cellMode === 'sel-all',
          'del-2n': cellMode === 'del-2n',
        }"
        :data="dataset"
      >
        <u-table-column
          v-for="item in columns"
          :key="item.name"
          :resizable="item.resizable"
          :show-overflow-tooltip="true"
          :prop="item.name"
          :label="item.name"
          :fixed="item.fixed"
          size="small"
          style="height: 100%;"
        >
          <span slot-scope="scope" class="data-cell" :index="scope.$index">
            <span
              class="cell-content"
              :class="{
                null: scope.row[item.name] === null,
              }"
            >
              {{
                [undefined, null, ''].includes(scope.row[item.name])
                  ? 'Null'
                  : scope.row[item.name]
              }}
            </span>
          </span>
        </u-table-column>
      </UTable>
    </template>
    <div v-else class="info-box">
      <a-spin v-if="isLoading" class="spinner" :spinning="true" />
      <span v-else class="msg-no-data">暂无数据</span>
    </div>
  </div>
</template>
<script lang="ts">
import { cloneDeep, isFunction, isNull } from 'lodash'
import OptionPreViewAction, {
  BeforeAfterModes,
  KeyWordModes,
} from '@/util/data-selection-actions'
import { tcolumnQueryDetail } from '@/api/visualization'
import DataStore, { IColumn, SelectionInfo } from '@/store/modules/dataview'
import { Component, Vue, Watch } from 'vue-property-decorator'
// @ts-ignore
import { UTable, UTableColumn } from 'umy-table'

@Component({
  components: {
    UTable,
    UTableColumn,
  },
})
export default class VisualRecommendation extends Vue {
  /**
   * 是否加载中
   */
  public isLoading: boolean = false
  /**
   * 单元格模式 del-all 删除 | sel-all 选中
   */
  public cellMode: string = ''

  /**
   * '操作前'面板中的列信息
   */
  public beforeColumns: Array<any> = []
  /**
   * '操作后'面板中的列信息
   */
  public afterColumns: Array<any> = []
  /**
   * '操作后'面板中的列信息
   */
  public afterDataset: Array<any> = []

  /**
   * 操作前/操作后所支持的actions
   */
  public beforeAfterModes: Array<string> = BeforeAfterModes

  /**
   * 操作后，操作前模式下 选中Null单元格，用于给模板添加 class标识
   */
  public get isBeforeAfterSelectNullCell() {
    return ([OptionPreViewAction.cellFilterSelectNullCellsReset] as Array<
      string
    >).includes(this.PreviewAction)
  }

  /**
   * 选中空单元格的模式（模板标识）
   */
  public selectNullCellMode: Array<string> = [
    OptionPreViewAction.columnFilterSelectNullCells,
    OptionPreViewAction.cellFilterSelectNullCells,
  ]

  /**
   * 关键字模式，模板标记关键字的标识
   */
  public get isKeywordMode() {
    return new Set(KeyWordModes as Array<string>).has(this.PreviewAction)
  }

  /**
   * 表格数据
   */
  public get StoreTableDataLoaded() {
    return DataStore.tableData
  }

  /**
   * 获取stroe对象
   */
  public get dataStore() {
    return DataStore
  }

  /**
   * action集合，用于模板中使用
   */
  public get PreviewAction() {
    return DataStore.VRPreviewAction
  }

  /**
   * pipeline选中节点
   */
  private get selectNode() {
    return DataStore.selectNode
  }

  /**
   * 当前历史记录
   */
  private get currentHistory() {
    return DataStore.currentHistory
  }

  /**
   * 需要渲染的预览数据集，beforeAfter模式中的before table以及table模式用用
   */
  public dataset: Array<any> = []

  /**
   * 需要渲染的列，beforeAfter模式中的before table以及table模式用用
   */
  public columns: Array<any> = []

  /**
   * 多列合并的分隔符
   */
  private get columnMergeColumnsJoinString() {
    return DataStore.columnMergeColumnsJoinString
  }

  /**
   * 多列合并后的新列名
   */
  private get columnMergeColumnsNewColumnName() {
    return DataStore.columnMergeColumnsNewColumnName
  }

  /**
   * 表格选中列
   */
  private get tableSelectColumns() {
    return DataStore.tableSelectColumns
  }

  /**
   * 选中字符串
   */
  get selectionkeyword() {
    return DataStore.tableSelctionText
  }

  /**
   * 替换字符串
   */
  get selectionReplaceKeyword() {
    return DataStore.selectionReplaceKeyword
  }

  /**
   * 单元格重新赋值的字符串
   */
  get selectionReplaceValue() {
    return DataStore.selectionReplaceValue
  }

  /** 用户填入的替换值 */
  get columnFilterSelectNullCellsResetValue() {
    return DataStore.columnFilterSelectNullCellsResetValue
  }

  /**
   * 根据列名获取列信息
   */
  getColumnInfo(name: string) {
    return DataStore.tableColumns.find((item) => item.name === name)
  }

  /** 监听触发更新 */
  @Watch('columnFilterSelectNullCellsResetValue')
  getColumnFilterSelectNullCellsResetValue() {
    this.getPreviewAction(this.PreviewAction)
  }

  /**
   * 监听合并字段分隔符，触发合并预览数据刷新
   */
  @Watch('columnMergeColumnsJoinString')
  getColumnMergeColumnsJoinString() {
    if (this.PreviewAction === OptionPreViewAction.columnMergeColumns) {
      this.initColumnMergeColumns()
    }
  }

  /**
   * 监听选中列变化，用于触发对应操作
   */
  @Watch('tableSelectColumns', { deep: true })
  getTableSelectColumns() {
    if (this.PreviewAction === OptionPreViewAction.columnMergeColumns) {
      this.initColumnMergeColumns()
    }
  }

  /**
   * 监听新列名变化同步合并列预览更新
   */
  @Watch('columnMergeColumnsNewColumnName')
  getColumnMergeColumnsNewColumnName() {
    if (this.PreviewAction === OptionPreViewAction.columnMergeColumns) {
      this.initColumnMergeColumns()
    }
  }

  /**
   * 数据变化后触发，用于后续的预览窗口的二次定位优化
   */
  @Watch('dataset', { immediate: true, deep: true })
  getDataset(newValue: Array<any>) {
    if (newValue) {
      this.$nextTick(() => {
        this.$emit('previewdatachange')
        // 延迟100ms 后再检测一遍，解决预览偶尔超出屏幕的问题
        setTimeout(() => {
          this.$emit('previewdatachange')
        }, 100)
      })
    }
    return newValue
  }

  /**
   * 监听关键字变化，更新相应的操作
   */
  @Watch('selectionReplaceKeyword', {
    immediate: true,
  })
  getSelectionReplaceKeyword(newValue: string) {
    this.getPreviewAction(this.PreviewAction)
    return newValue
  }

  /**
   * 监听替换内容变化, 更新相应操作
   */
  @Watch('selectionReplaceValue', {
    immediate: true,
  })
  getSelectionReplaceValue(newValue: string) {
    this.getPreviewAction(this.PreviewAction)
    return newValue
  }

  /**
   * 监听操作变化，触发实时预览对应的操作
   */
  @Watch('PreviewAction', {
    immediate: true,
  })
  getPreviewAction(action: string) {
    const methodName =
      action !== ''
        ? `init${action.replace(action[0], action[0].toUpperCase())}`
        : ''
    if (methodName !== '' && isFunction((this as any)[methodName])) {
      ;(this as any)[methodName]()
    } else {
      console.error(`action callback not defined: ${action}`)
    }
  }

  /**
   * 预览默认查询参数
   */
  defaultQueryInfo(pageSize_?: number) {
    return {
      curPage: 1,
      name: '_record_id_',
      pageSize: pageSize_ || 5,
      table: this.currentHistory
        ? this.currentHistory.data.table
        : (this.selectNode.data.output[0] || {}).tableName,
      taskId: this.selectNode.id,
    }
  }

  /**
   * 删除所选行默认绑定
   */
  bindDataDeleteRowsCommon(response: any) {
    this.dataset = response.data.result.data
    this.columns = DataStore.tableColumns
    this.cellMode = 'del-all'
  }

  /**
   * 仅保留所选行默认绑定
   */
  bindDataKeepRowsCommon(response: any, columns?: Array<IColumn>) {
    this.dataset = response.data.result.data
    this.columns = columns || DataStore.tableColumns
    this.cellMode = 'sel-all'
  }

  /**
   * 通用查询预览数据并同步状态
   */
  private queryData(data: any, callback: Function) {
    this.isLoading = true
    tcolumnQueryDetail(data)
      .then((response) => {
        if (response.data.code === 100 && callback) {
          callback(response)
        }
        this.isLoading = false
      })
      .catch(() => {
        this.isLoading = false
      })
  }

  /**
   * 获取包含缺省值的行
   */
  private syncNullRows() {
    this.columns = DataStore.tableColumns
    this.dataset = []
    this.queryData(
      {
        data: {
          ...this.defaultQueryInfo(),
          filter: [],
          data: {
            transformType: 'SELECT_NULL',
          },
        },
      },
      (response: any) => {
        this.dataset = response.data.result.data
      }
    )
  }

  /**
   * 行操作，筛选面板 > 选出存在缺失值的行
   */
  public initRowFilterSelectNullRows() {
    this.cellMode = 'sel-all'
    this.syncNullRows()
  }

  /**
   * 行操作，筛选面板 > 选出存在缺失值的行 > 删除所选行
   */
  public initRowFilterSelectNullRowsDelete() {
    this.cellMode = 'del-all'
    this.syncNullRows()
  }

  /**
   * 行操作，筛选面板 > 选出存在缺失值的行 > 仅保留所选行
   */
  public initRowFilterSelectNullRowsKeep() {
    this.cellMode = 'sel-all'
    this.syncNullRows()
  }

  /**
   * 列操作，常用面板 > 删除当前选中的列
   */
  public initColumnCommonDeleteSelectColumns() {
    this.beforeColumns = DataStore.tableSelectColumns
    this.afterColumns = DataStore.tableSelectColumns
    this.dataset = DataStore.tableData.filter((item, index) => {
      return index < 5
    })
    this.afterDataset = this.dataset
    this.cellMode = 'del-all'
  }

  /**
   * 列操作，常用面板 > 仅保留所选列
   */
  public initColumnCommonDeleteOtherColumns() {
    this.beforeColumns = DataStore.tableSelectColumns
    this.afterColumns = DataStore.tableSelectColumns
    this.dataset = DataStore.tableData.filter((item, index) => {
      return index < 5
    })
    this.afterDataset = this.dataset
    this.cellMode = 'sel-all'
  }

  /**
   * 获取所选列中值重复的行
   */
  private syncColumnValueRepeatRows(callback: Function) {
    const columns = DataStore.tableSelectColumns.reduce(
      (rec: Array<string>, item) => {
        rec.push(item.name)
        return rec
      },
      []
    )

    this.queryData(
      {
        data: {
          ...this.defaultQueryInfo(3),
          data: {
            transformType: 'TRANSFORM_REMOVE',
            partitionCols: columns,
          },
        },
      },
      (response: any) => {
        callback(response)
      }
    )
  }

  /**
   * 列操作, 常规面板 > 去除所选列中的重复行
   */
  public initColumnCommonDeleteRepeatCells() {
    this.syncColumnValueRepeatRows((response: any) => {
      this.columns = DataStore.tableColumns
      this.dataset = [] as Array<any>
      ;(response.data.result.data as Array<any>).forEach((item) => {
        this.dataset.push(item, item)
      })
      this.cellMode = 'del-2n'
    })
  }

  /**
   * 行 > 常规 > 删除所选行
   */
  public initRowCommonDelete() {
    this.columns = DataStore.tableColumns
    this.dataset = DataStore.tableSelectRowDatas.slice(0, 5)
    this.cellMode = 'del-all'
  }

  /**
   * 行 > 常规 > 仅保留所选行
   */
  public initRowCommonKeep() {
    this.columns = DataStore.tableColumns
    this.dataset = DataStore.tableSelectRowDatas.slice(0, 5)
    this.cellMode = 'sel-all'
  }

  /**
   * 获取列中包含缺省值的单元格
   */
  private syncColumnNullCells(
    pageSize: number,
    columnName: string,
    callback: Function
  ) {
    const cellColumn = DataStore.tableColumns.find((column) => {
      return column.name === columnName
    })
    const isNumberColumn =
      cellColumn &&
      cellColumn.desc &&
      ['decimal', 'int'].includes(cellColumn.desc)
    const filterItem = isNumberColumn
      ? [
          {
            col: columnName,
            values: ['#NULL'],
            filterType: '=',
          },
        ]
      : [
          {
            col: columnName,
            values: ['#NULL'],
            filterType: '=',
          },
          {
            col: columnName,
            values: [''],
            filterType: '=',
          },
        ]
    const queryData: any = {
      ...this.defaultQueryInfo(pageSize),
      filter: [filterItem],
    }
    this.queryData(
      {
        data: queryData,
      },
      (response: any) => {
        callback(response)
      }
    )
  }

  /**
   * 列操作，筛选面板 > 选出该列存在缺失值的单元格
   */
  initColumnFilterSelectNullCells() {
    this.syncColumnNullCells(
      2,
      DataStore.tableSelectColumns[0].name,
      (response: any) => {
        this.columns = DataStore.tableColumns.filter((item) =>
          [DataStore.tableSelectColumns[0].name].includes(item.name)
        )
        this.dataset = response.data.result.data
        // 如果查到有Null则再混入几个非null的行
        if (this.dataset.length > 0) {
          const result: Array<any> = []
          const columnName: string = DataStore.tableSelectColumns[0]?.name
          for (let i = 0; i < this.dataStore.tableData.length; i += 1) {
            if (
              ![null, '', undefined].includes(
                this.dataStore.tableData[i][columnName]
              )
            ) {
              result.push(this.dataStore.tableData[i])
              if (result.length === 3) {
                break
              }
            }
          }
          this.dataset.push(...result)
        }
      }
    )
  }

  /**
   * 单元格 > 获取单元格所在列中 > 包含缺省值的单元格
   */
  initCellFilterSelectNullCells() {
    if (DataStore.tableSelectCells.length > 0) {
      this.columns = DataStore.tableColumns.filter(
        (item) => item.name === DataStore.tableSelectCells[0].columnName
      )
      this.syncColumnNullCells(2, this.columns[0].name, (response: any) => {
        this.dataset = response.data.result.data
        // 如果查到有Null则再混入几个非null的行
        if (this.dataset.length > 0) {
          const result: Array<any> = []
          const columnName: string = this.columns[0]?.name
          for (let i = 0; i < DataStore.tableData.length; i += 1) {
            if (
              ![null, '', undefined].includes(
                DataStore.tableData[i][columnName]
              )
            ) {
              result.push(this.dataStore.tableData[i])
              if (result.length === 3) {
                break
              }
            }
          }
          this.dataset.push(...result)
        }
      })
    }
  }

  /**
   * 获取已选单元格去重后的值的集合
   */
  private getContainsValues(): Array<string> {
    const info = DataStore.tableSelectCells
    const values = info
      ? info.map((item) => {
          return [null, '', undefined].includes(item.cellValue)
            ? '#NULL'
            : item.cellValue
        })
      : []
    return [...new Set(values)]
  }

  /**
   * 获取contains数据
   */
  private syncContainsCellData(callback: Function) {
    const cell = DataStore.tableSelectCells[0]
    const cellColumn = DataStore.tableColumns.find((column) => {
      return DataStore.tableSelectCells[0].columnName === column.name
    })
    const isNumberColumn =
      cellColumn &&
      cellColumn.desc &&
      ['decimal', 'int'].includes(cellColumn.desc)
    const values = this.getContainsValues()
    const hasNull = values.includes('#NULL')
    // 如果包含Null值则需要分开
    let filter = []
    if (!hasNull) {
      filter = [
        [
          {
            col: cell.columnName,
            values,
            filterType: '=',
          },
        ],
      ]
    } else {
      filter = [
        [
          {
            col: cell.columnName,
            values: [isNumberColumn ? '#NULL' : ''],
            filterType: '=',
          },
        ],
      ]
      if (values.length > 1) {
        filter[0].push({
          col: cell.columnName,
          values: values.filter((item) => item !== '#NULL'),
          filterType: '=',
        })
      }
    }
    this.queryData(
      {
        data: {
          ...this.defaultQueryInfo(),
          filter,
        },
      },
      (response: any) => {
        callback(response)
      }
    )
  }

  /**
   * 获取匹配选中单元格中的值的所有单元格
   */
  initCellFilterSelectContainsCell() {
    const column = DataStore.tableSelectCells[0].columnName
    this.syncContainsCellData((response: any) => {
      this.dataset = response.data.result.data
      this.columns = DataStore.tableColumns.filter((item) => {
        return item.name === column
      })
      this.cellMode = 'sel-all'
    })
  }

  /**
   * 获取对比或范围数据
   */
  private syncCompareOrRangeData(filter: any, callback: Function) {
    this.queryData(
      {
        data: {
          ...this.defaultQueryInfo(),
          filter,
        },
      },
      (response: any) => {
        callback(response)
      }
    )
  }

  /** 单元格模式下获取当前列 */
  private getCurrendCellColumn() {
    const cell = DataStore.tableSelectCells[0]
    return cell
      ? DataStore.tableColumns.filter((columnSet) => {
          return columnSet.name === cell.columnName
        })
      : undefined
  }

  /**
   * 单元格多选对比预览
   */
  initCellFilterSelectCompareCell() {
    const cell = DataStore.tableSelectCells[0]
    const filter: any = [
      [
        {
          col: cell.columnName,
          filterType: DataStore.vrCompareInfo?.compareMode,
          values: [DataStore.vrCompareInfo?.delimiter],
        },
      ],
    ]
    this.syncCompareOrRangeData(filter, (response: any) => {
      this.bindDataKeepRowsCommon(response, this.getCurrendCellColumn())
    })
  }

  /**
   * 单元格多选对比 > 重置单元格内容 预览
   */
  initCellFilterSelectCompareCellReset() {
    const cell = DataStore.tableSelectCells[0]
    const filter: any = [
      [
        {
          col: cell.columnName,
          filterType: DataStore.vrCompareInfo?.compareMode,
          values: [DataStore.vrCompareInfo?.delimiter],
        },
      ],
    ]

    this.syncCompareOrRangeData(filter, (response: any) => {
      const dataset = response.data.result.data
      const columns = DataStore.tableColumns.filter(
        (item) => cell.columnName === item.name
      )
      this.beforeColumns = columns
      this.afterColumns = columns
      this.dataset = dataset
      this.afterDataset = this.dataset.map((item) => {
        return {
          ...item,
          [`${cell.columnName}`]: DataStore.columnFilterSelectNullCellsResetValue,
        }
      })
      this.cellMode = ''
    })
  }

  /**
   * 单元格对比 > 删除所选单元格 预览
   */
  initCellFilterSelectCompareCellDeleteRows() {
    const cell = DataStore.tableSelectCells[0]
    const filter: any = [
      [
        {
          col: cell.columnName,
          filterType: DataStore.vrCompareInfo?.compareMode,
          values: [DataStore.vrCompareInfo?.delimiter],
        },
      ],
    ]

    this.syncCompareOrRangeData(filter, (response: any) => {
      this.bindDataDeleteRowsCommon(response)
    })
  }

  /**
   * 单元格对比 > 仅保留所选行 预览
   */
  initCellFilterSelectCompareCellKeepRows() {
    const cell = DataStore.tableSelectCells[0]
    const filter: any = [
      [
        {
          col: cell.columnName,
          filterType: DataStore.vrCompareInfo?.compareMode,
          values: [DataStore.vrCompareInfo?.delimiter],
        },
      ],
    ]
    this.syncCompareOrRangeData(filter, (response: any) => {
      this.bindDataKeepRowsCommon(response)
    })
  }

  /**
   * 获取单元格值范围筛选参数
   */
  private getCellRangeFilter() {
    const cell = DataStore.tableSelectCells[0]
    return [
      [
        {
          col: cell.columnName,
          filterType: '[a,b]',
          values: DataStore.vrRangeInfo || [0, 0],
        },
      ],
    ]
  }

  /**
   * 单元格内容范围筛选
   */
  initCellFilterSelectRangeCell() {
    this.syncCompareOrRangeData(this.getCellRangeFilter(), (response: any) => {
      this.dataset = response.data.result.data
      this.columns = this.getCurrendCellColumn() || DataStore.tableColumns
      this.cellMode = 'sel-all'
    })
  }

  /**
   * 单元格内容范围筛选 > 重置所选单元格所在的行
   */
  initCellFilterSelectRangeCellReset() {
    const cell = DataStore.tableSelectCells[0]
    this.syncCompareOrRangeData(this.getCellRangeFilter(), (response: any) => {
      const dataset = response.data.result.data
      const columns = DataStore.tableColumns.filter(
        (item) => cell.columnName === item.name
      )
      this.beforeColumns = columns
      this.afterColumns = columns
      this.dataset = dataset
      this.afterDataset = this.dataset.map((item) => {
        return {
          ...item,
          [`${cell.columnName}`]: DataStore.columnFilterSelectNullCellsResetValue,
        }
      })
      this.cellMode = ''
    })
  }

  /**
   * 单元格内容范围筛选 > 重置所选单元格所在的行
   */
  initCellFilterSelectRangeCellDeleteRows() {
    this.syncCompareOrRangeData(this.getCellRangeFilter(), (response: any) => {
      this.bindDataDeleteRowsCommon(response)
    })
  }

  /**
   * 单元格内容范围筛选 > 仅保留所选单元格所在的行
   */
  initCellFilterSelectRangeCellKeepRows() {
    this.syncCompareOrRangeData(this.getCellRangeFilter(), (response: any) => {
      this.bindDataKeepRowsCommon(response)
    })
  }

  /**
   * 单元格值匹配 > 为所选单元格重新赋值
   */
  initCellFilterSelectContainsCellReset() {
    this.syncContainsCellData((response: any) => {
      const dataset = response.data.result.data
      const cell = DataStore.tableSelectCells[0]
      const columns = DataStore.tableColumns.filter(
        (item) => cell.columnName === item.name
      )
      this.beforeColumns = columns
      this.afterColumns = columns
      this.dataset = dataset
      this.afterDataset = this.dataset.map((item) => {
        return {
          ...item,
          [`${cell.columnName}`]: DataStore.columnFilterSelectNullCellsResetValue,
        }
      })
      this.cellMode = ''
    })
  }

  /**
   * 单元格值匹配 > 仅保留单元格所在的行
   */
  initCellFilterSelectContainsCellKeepRows() {
    this.syncContainsCellData((response: any) => {
      this.bindDataKeepRowsCommon(response)
    })
  }

  /**
   * 单元格值匹配 > 删除单元格所在的行
   */
  initCellFilterSelectContainsCellDeleteRows() {
    this.syncContainsCellData((response: any) => {
      this.bindDataDeleteRowsCommon(response)
    })
  }

  /**
   * 单元格 > 筛选 > 筛选出该列包含缺省值的单元格 > 重新赋值
   */
  initCellFilterSelectNullCellsReset() {
    const columnCells = DataStore.tableColumns.filter(
      (item) => item.name === DataStore.tableSelectCells[0].columnName
    )
    this.syncColumnNullCells(2, columnCells[0].name, (response: any) => {
      this.beforeColumns = [columnCells[0]]
      this.dataset = response.data.result.data
      const result: Array<any> = []
      const columnName: string = columnCells[0]?.name
      for (let i = 0; i < this.dataStore.tableData.length; i += 1) {
        if (
          ![null, '', undefined].includes(
            this.dataStore.tableData[i][columnName]
          )
        ) {
          result.push(this.dataStore.tableData[i])
          if (result.length === 3) {
            break
          }
        }
      }
      this.dataset.push(...result)
      this.afterColumns = this.beforeColumns
      this.afterDataset = this.dataset.map((item) => {
        return {
          [`${columnName}_$$$beforeIsNull`]: [null, '', undefined].includes(
            item[columnName]
          ),
          [`${columnName}`]: [null, '', undefined].includes(item[columnName])
            ? DataStore.columnFilterSelectNullCellsResetValue
            : (item[columnName] as string),
        }
      })
      this.cellMode = ''
    })
  }

  /**
   * 单元格 > 筛选 > 筛选出该列包含缺省值的单元格 > 删除单元格所在的行
   */
  initCellFilterSelectNullCellsDeleteRows() {
    if (DataStore.tableSelectCells.length > 0) {
      const columnCells = DataStore.tableColumns.filter(
        (item) => item.name === DataStore.tableSelectCells[0].columnName
      )
      this.syncColumnNullCells(5, columnCells[0].name, (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      })
    }
  }

  /**
   * 单元格 > 筛选 > 筛选出该列包含缺省值的单元格 > 仅保留单元格所在的行
   */
  initCellFilterSelectNullCellsKeepRows() {
    if (DataStore.tableSelectCells.length > 0) {
      const columnCells = DataStore.tableColumns.filter(
        (item) => item.name === DataStore.tableSelectCells[0].columnName
      )
      this.syncColumnNullCells(5, columnCells[0].name, (response: any) => {
        this.bindDataKeepRowsCommon(response)
      })
    }
  }

  /**
   * 单元格 > 重新赋值 > 重新赋值为null (包含单个、多个单元额点选)
   */
  initCellResetSelectCellReset() {
    if (DataStore.tableSelectCells.length > 0) {
      const cells = DataStore.tableSelectCells
      const cell = DataStore.tableSelectCells[0]
      const columns = DataStore.tableColumns.filter(
        (item) => cell.columnName === item.name
      )
      this.beforeColumns = columns
      this.afterColumns = columns
      this.dataset = cells.map((selectCell) => {
        return {
          [`${cell.columnName}`]: selectCell.cellValue as any,
        }
      })
      this.afterDataset = cells.map(() => {
        return {
          [`${cell.columnName}`]: DataStore.cellResetSelectCellResetValue,
        }
      })
    }
  }

  /**
   * 单元格 > 常规 > 删除所选单元格所在的行
   */
  initCellCommonDeleteSelectRows() {
    const cells = DataStore.tableSelectCells.slice(0, 5)
    this.columns = DataStore.tableColumns
    const rowIndexMaps: any = {}
    cells.forEach((cell) => {
      rowIndexMaps[`row_${cell.rowIndex}`] = DataStore.tableData[cell.rowIndex]
    })
    this.dataset = Object.values(rowIndexMaps)
    this.cellMode = 'del-all'
  }

  initCellCommonKeepSelectRows() {
    const cells = DataStore.tableSelectCells.slice(0, 5)
    this.columns = DataStore.tableColumns
    const rowIndexMaps: any = {}
    cells.forEach((cell) => {
      rowIndexMaps[`row_${cell.rowIndex}`] = DataStore.tableData[cell.rowIndex]
    })
    this.dataset = Object.values(rowIndexMaps)
    this.cellMode = 'sel-all'
  }

  /**
   * 列操作，筛选面板 > 选出该列存在缺失值的单元格 > 重新赋值
   */
  initColumnFilterSelectNullCellsReset() {
    this.syncColumnNullCells(
      2,
      DataStore.tableSelectColumns[0].name,
      (response: any) => {
        this.beforeColumns = [DataStore.tableSelectColumns[0]]
        this.dataset = response.data.result.data
        const result: Array<any> = []
        const columnName: string = DataStore.tableSelectColumns[0]?.name
        for (let i = 0; i < this.dataStore.tableData.length; i += 1) {
          if (
            ![null, '', undefined].includes(
              this.dataStore.tableData[i][columnName]
            )
          ) {
            result.push(this.dataStore.tableData[i])
            if (result.length === 3) {
              break
            }
          }
        }
        this.dataset.push(...result)
        this.afterColumns = this.beforeColumns
        this.afterDataset = this.dataset.map((item) => {
          return {
            [`${columnName}`]: [null, '', undefined].includes(item[columnName])
              ? DataStore.columnFilterSelectNullCellsResetValue
              : (item[columnName] as string),
          }
        })
        this.cellMode = ''
      }
    )
  }

  /**
   * 列操作 > 筛选 > 筛选出该列包含缺省值的单元格 > 删除单元格所在的行
   */
  public initColumnFilterSelectNullCellsDeleteRows() {
    this.syncColumnNullCells(
      5,
      DataStore.tableSelectColumns[0].name,
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  public initColumnFilterSelectNullCellsKeepRows() {
    this.syncColumnNullCells(
      5,
      DataStore.tableSelectColumns[0].name,
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 列操作， 合并单元格预览
   */
  initColumnMergeColumns() {
    this.beforeColumns = DataStore.tableSelectColumns
    this.afterColumns = [
      {
        name: DataStore.columnMergeColumnsNewColumnName,
        desc: 'varchar',
      },
    ]
    this.dataset = DataStore.tableData.slice(0, 5)
    this.afterDataset = this.dataset.map((item) => {
      return {
        [`${DataStore.columnMergeColumnsNewColumnName}`]: this.beforeColumns.reduce(
          (rec, itemColumn, currentIndex) => {
            return (
              rec +
              (currentIndex > 0 ? DataStore.columnMergeColumnsJoinString : '') +
              item[itemColumn.name]
            )
          },
          ''
        ),
      }
    })
  }

  /**
   * 根据关键字列名查出匹配的数据
   */
  queryDetailByKeyword(
    keyword: string,
    columnName: string,
    callback: Function
  ) {
    const dataParameters: any = {
      ...this.defaultQueryInfo(),
      filter: [
        [
          {
            col: columnName,
            values: [keyword],
            filterType: '~',
          },
        ],
      ],
    }
    this.queryData(
      {
        data: dataParameters,
      },
      callback
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格
   */
  initSelectionFilterSelectCellsByKeyword() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            const columnName = DataStore.tableSelectionInfo?.columnName || ''
            this.columns = DataStore.tableColumns.filter((column) => {
              return column.name === columnName
            })
            this.dataset = response.data.result.data
            this.cellMode = 'sel-all'
          }
        }
      )
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 抽取所选内容单独形成一列
   */
  initSelectionFilterSelectCellsByKeywordExtractColumn() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            this.beforeColumns = DataStore.tableColumns.filter((column) => {
              return column.name === DataStore.tableSelectionInfo?.columnName
            })
            this.afterColumns = cloneDeep(this.beforeColumns)
            const newColumnName = DataStore.tableExtractColumnName
              ? DataStore.tableExtractColumnName
              : this.getExtColumnName(this.afterColumns[0].name)
            this.afterColumns.push({
              name: newColumnName,
              desc: 'varchar',
              type: -1,
            })
            const dataset = (response.data.result.data as Array<any>).map(
              (item: any) => {
                return {
                  ...item,
                  [`${newColumnName}`]: DataStore.tableSelectionInfo?.selection,
                }
              }
            )
            const nameReplace = DataStore.tableSelectionInfo
              ? DataStore.tableSelectionInfo.columnName
              : ''
            const selectionText = DataStore.tableSelectionInfo
              ? DataStore.tableSelectionInfo.selection
              : ''
            this.afterColumns[0].name = nameReplace
            this.afterDataset = dataset
            this.columns = DataStore.tableColumns.filter((column) => {
              return column.name === DataStore.tableSelectionInfo?.columnName
            })
            this.dataset = dataset.map((item) => {
              const value = [null, undefined].includes(item[nameReplace])
                ? ''
                : (item[nameReplace] as string)
              return {
                ...item,
                [nameReplace]: value.replace(
                  selectionText,
                  `<span class="word">${selectionText}</span>`
                ),
              }
            })
            this.cellMode = 'ext'
          }
        }
      )
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 根据所选内容将当前列拆分多列
   */
  initSelectionFilterSelectCellsByKeywordSplitColumns() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            this.beforeColumns = DataStore.tableColumns.filter((column) => {
              return column.name === DataStore.tableSelectionInfo?.columnName
            })
            this.afterColumns = cloneDeep(this.beforeColumns)
            const newColumnName = DataStore.tableSplitInfo?.newCol
              ? DataStore.tableSplitInfo?.newCol
              : [this.getExtColumnName(this.afterColumns[0].name)]
            const columnName = DataStore.tableSelectionInfo?.columnName || ''
            const selecitonText = DataStore.tableSelectionInfo?.selection || ''
            const dataSet = (response.data?.result?.data || []) as Array<any>
            const columnOrigin = DataStore.tableSelectionInfo?.columnName || ''
            const splitString = DataStore.tableSplitInfo?.separator || ''
            dataSet.forEach((dataItem) => {
              const splitArray = `${dataItem[columnOrigin]}`.split(splitString)
              newColumnName.forEach((colName: string, index: number) => {
                dataItem[colName] = splitArray[index] || ''
              })
            })
            this.dataset = dataSet.map((item) => {
              const value = [null, undefined].includes(item[columnName])
                ? ''
                : item[columnName]
              return {
                ...item,
                [columnName]: value.replace(
                  selecitonText,
                  `<span class="word">${selecitonText}</span>`
                ),
              }
            })
            this.afterDataset = dataSet
            newColumnName.forEach((colName: string) => {
              this.afterColumns.push({
                name: colName,
                desc: 'varchar',
                type: -1,
              })
            })
            this.cellMode = 'ext'
          }
        }
      )
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 仅保留单元格所在的行
   */
  initSelectionFilterSelectCellsByKeywordKeepRows() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            this.bindDataKeepRowsCommon(response)
          }
        }
      )
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 删除单元格所在的行
   */
  initSelectionFilterSelectCellsByKeywordDeleteRows() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            this.bindDataDeleteRowsCommon(response)
          }
        }
      )
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 替换当前所选单元格中刷选内容
   */
  initSelectionFilterSelectCellsByKeywordReplaceKeyword() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            this.beforeColumns = DataStore.tableColumns.filter((column) => {
              return column.name === DataStore.tableSelectionInfo?.columnName
            })
            this.afterColumns = cloneDeep(this.beforeColumns)
            const columnName = DataStore.tableSelectionInfo
              ? DataStore.tableSelectionInfo.columnName
              : ''

            const dataset = (response.data.result.data || []) as Array<any>
            this.afterColumns = this.beforeColumns
            this.afterDataset = dataset.map((item) => {
              return {
                ...item,
                [`${columnName}`]: item[`${columnName}`].replaceAll(
                  this.selectionkeyword,
                  `<span class="word">${
                    [null, '', undefined].includes(this.selectionReplaceKeyword)
                      ? 'null'
                      : this.selectionReplaceKeyword
                  }</span>`
                ),
              }
            })
            this.dataset = dataset.map((item) => {
              return {
                ...item,
                [`${columnName}`]: item[`${columnName}`].replace(
                  this.selectionkeyword,
                  `<span class="word">${
                    [null, '', undefined].includes(this.selectionkeyword)
                      ? 'null'
                      : this.selectionkeyword
                  }</span>`
                ),
              }
            })
          }
        }
      )
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 为所选单元格重新赋值
   */
  initSelectionFilterSelectCellsByKeywordReplaceContent() {
    if (DataStore.tableSelectionInfo) {
      this.queryDetailByKeyword(
        DataStore.tableSelectionInfo.selection,
        DataStore.tableSelectionInfo.columnName,
        (response: any) => {
          if (response.data.code === 100) {
            this.beforeColumns = DataStore.tableColumns.filter((column) => {
              return column.name === DataStore.tableSelectionInfo?.columnName
            })
            this.afterColumns = cloneDeep(this.beforeColumns)
            const dataset = (response.data.result.data as Array<any>) || []
            const nameReplace = DataStore.tableSelectionInfo
              ? DataStore.tableSelectionInfo.columnName
              : ''
            this.afterColumns[0].name = nameReplace
            const dataSetTrans = [] as Array<any>
            this.afterDataset = dataset.map((item) => {
              const value = [null, undefined].includes(item[nameReplace])
                ? ''
                : (item[nameReplace] as string)
              dataSetTrans.push({
                ...item,
                [nameReplace]: value.replace(
                  this.selectionkeyword,
                  `<span class="word">${
                    [null, '', undefined].includes(this.selectionkeyword)
                      ? 'null'
                      : this.selectionkeyword
                  }</span>`
                ),
              })
              return {
                ...item,
                [nameReplace]: this.selectionReplaceValue,
              }
            })
            this.dataset = dataSetTrans
          }
        }
      )
    }
  }

  /**
   * 获取新的列名
   */
  getExtColumnName(columnName: string) {
    const columns = DataStore.tableColumns.reduce(
      (rec: Array<string>, item) => {
        rec.push(item.name)
        return rec
      },
      []
    )
    let i = 0
    let columnNameNew = ''
    do {
      i += 1
      columnNameNew = `${columnName}_字段${i}`
    } while (columns.includes(columnNameNew))
    return columnNameNew
  }

  private bindExtData(response: any) {
    this.beforeColumns = DataStore.tableColumns.filter((column) => {
      return column.name === DataStore.tableSelectionInfo?.columnName
    })
    this.afterColumns = cloneDeep(this.beforeColumns)
    const newColumnName = DataStore.tableExtractColumnName
      ? DataStore.tableExtractColumnName
      : this.getExtColumnName(this.afterColumns[0].name)
    this.afterColumns.push({
      name: newColumnName,
      desc: 'varchar',
      type: -1,
    })
    const dataset: Array<any> = response.data.result.data.map((item: any) => {
      return {
        ...item,
        [`${newColumnName}`]: DataStore.tableSelectionInfo?.selection,
      }
    })
    const nameReplace = DataStore.tableSelectionInfo
      ? DataStore.tableSelectionInfo.columnName
      : ''
    this.afterColumns[0].name = nameReplace
    this.afterDataset = dataset
    this.columns = DataStore.tableColumns.filter((column) => {
      return column.name === DataStore.tableSelectionInfo?.columnName
    })
    this.dataset = dataset
    this.cellMode = 'ext'
  }

  /**
   * 获取以xxx结尾的单元格 通用查询参数
   */
  private getSelectionFilterSelectCellsEndWithQueryData() {
    return {
      ...this.defaultQueryInfo(),
      filter: [
        [
          {
            col: DataStore.tableSelectionInfo?.columnName,
            filterType: 'ends with',
            values: [DataStore.tableSelectionInfo?.selection],
            wildcardType: 'start',
          },
        ],
      ],
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字结尾的单元格
   */
  initSelectionFilterSelectCellsEndWithKeyword() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsEndWithQueryData(),
      },
      (response: any) => {
        this.dataset = response.data.result.data
        this.columns = DataStore.tableColumns.filter((item) => {
          return item.name === DataStore.tableSelectionInfo?.columnName
        })
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字结尾的单元格 > 抽取选中内容为一列
   */
  initSelectionFilterSelectCellsEndWithKeywordExtractColumn() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsEndWithQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const newColumnName = DataStore.tableExtractColumnName
          ? DataStore.tableExtractColumnName
          : this.getExtColumnName(this.afterColumns[0].name)
        const columnName = DataStore.tableSelectionInfo?.columnName || ''
        this.afterColumns.push({
          name: newColumnName,
          desc: 'varchar',
          type: -1,
        })
        const regExp = new RegExp(
          `(${DataStore.tableSelectionInfo?.selection || ''}$)`
        )
        const dataset: Array<any> = response.data.result.data.map(
          (item: any) => {
            const value = [null, undefined].includes(item[columnName])
              ? ''
              : (item[columnName] as string)
            return {
              ...item,
              [`${columnName}`]: value.replace(
                regExp,
                '<span class="word">$1</span>'
              ),
              [`${newColumnName}`]: DataStore.tableSelectionInfo?.selection,
            }
          }
        )
        this.afterColumns[0].name = columnName
        this.afterDataset = dataset
        this.columns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = dataset
        this.cellMode = 'ext'
        //  this.bindExtData(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字结尾的单元格 > 删除所选单元格
   */
  initSelectionFilterSelectCellsEndWithKeywordDeleteRows() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsEndWithQueryData(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字结尾的单元格 > 仅保留所选单元格
   */
  initSelectionFilterSelectCellsEndWithKeywordKeepRows() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsEndWithQueryData(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字结尾的单元格 > 替换选中的内容
   */
  initSelectionFilterSelectCellsEndWithKeywordReplaceKeyword() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsEndWithQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const columnName = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        const dataset = (response.data.result.data || []) as Array<any>
        this.afterColumns = this.beforeColumns
        const regExp = new RegExp(`${this.selectionkeyword}$`)
        this.afterDataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: item[`${columnName}`].replace(
              regExp,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionReplaceKeyword)
                  ? 'null'
                  : this.selectionReplaceKeyword
              }</span>`
            ),
          }
        })
        this.dataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: item[`${columnName}`].replace(
              regExp,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionkeyword)
                  ? 'null'
                  : this.selectionkeyword
              }</span>`
            ),
          }
        })
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字结尾的单元格 > 单元格重新赋值
   */
  initSelectionFilterSelectCellsEndWithKeywordReplaceContent() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsEndWithQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const dataset = (response.data.result.data || []) as Array<any>
        const nameReplace = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        this.afterColumns[0].name = nameReplace
        const regExp = new RegExp(`${this.selectionkeyword}$`)
        this.afterDataset = this.dataset.map((item) => {
          return {
            ...item,
            [nameReplace]: this.selectionReplaceValue,
          }
        })
        this.dataset = dataset.map((item) => {
          return {
            ...item,
            [`${nameReplace}`]: item[`${nameReplace}`].replace(
              regExp,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionkeyword)
                  ? 'null'
                  : this.selectionkeyword
              }</span>`
            ),
          }
        })
      }
    )
  }

  /**
   * 获取首部字符匹配数据查询参数
   */
  private getSelectionFilterSelectCellsStartWithKeywordQueryData() {
    return {
      ...this.defaultQueryInfo(),
      filter: [
        [
          {
            col: DataStore.tableSelectionInfo?.columnName,
            filterType: 'starts with',
            values: [DataStore.tableSelectionInfo?.selection],
            wildcardType: 'start',
          },
        ],
      ],
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字开头的单元格
   */
  initSelectionFilterSelectCellsStartWithKeyword() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsStartWithKeywordQueryData(),
      },
      (response: any) => {
        this.columns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = response.data.result.data
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字开头的单元格 > 抽取选中内容为一列
   */
  initSelectionFilterSelectCellsStartWithKeywordExtractColumn() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsStartWithKeywordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const columnName = DataStore.tableSelectionInfo?.columnName || ''
        const newColumnName = DataStore.tableExtractColumnName
          ? DataStore.tableExtractColumnName
          : this.getExtColumnName(this.afterColumns[0].name)
        this.afterColumns.push({
          name: newColumnName,
          desc: 'varchar',
          type: -1,
        })
        const regExp = new RegExp(
          `(^${DataStore.tableSelectionInfo?.selection || ''})`
        )
        const dataset: Array<any> = response.data.result.data.map(
          (item: any) => {
            const value = [null, undefined].includes(item[columnName])
              ? ''
              : (item[columnName] as string)
            return {
              ...item,
              [`${columnName}`]: value.replace(
                regExp,
                '<span class="word">$1</span>'
              ),
              [`${newColumnName}`]: DataStore.tableSelectionInfo?.selection,
            }
          }
        )
        const nameReplace = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        this.afterColumns[0].name = nameReplace
        this.afterDataset = dataset
        this.columns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = dataset
        this.cellMode = 'ext'
        //  this.bindExtData(response)
        //  this.cellMode = ''
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出以关键字开头的单元格 > 替换当前所选单元格中刷选内容
   */
  initSelectionFilterSelectCellsStartWithKeywordReplaceKeyword() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsStartWithKeywordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const columnName = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        const dataset = (response.data.result.data || []) as Array<any>
        this.afterColumns = this.beforeColumns
        this.afterDataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: item[`${columnName}`].replace(
              this.selectionkeyword,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionReplaceKeyword)
                  ? 'null'
                  : this.selectionReplaceKeyword
              }</span>`
            ),
          }
        })
        this.dataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: item[`${columnName}`].replace(
              this.selectionkeyword,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionkeyword)
                  ? 'null'
                  : this.selectionkeyword
              }</span>`
            ),
          }
        })
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 为所选单元格重新赋值
   */
  initSelectionFilterSelectCellsStartWithKeywordReplaceContent() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsStartWithKeywordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const dataset = (response.data.result.data as Array<any>) || []
        const nameReplace = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        this.afterColumns[0].name = nameReplace
        const dataTrans = [] as Array<any>
        this.afterDataset = dataset.map((item) => {
          const value = [null, undefined].includes(item[nameReplace])
            ? ''
            : (item[nameReplace] as string)
          dataTrans.push({
            ...item,
            [nameReplace]: value.replace(
              this.selectionkeyword,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionkeyword)
                  ? 'null'
                  : this.selectionkeyword
              }</span>`
            ),
          })
          return {
            ...item,
            [nameReplace]: this.selectionReplaceValue,
          }
        })
        this.dataset = dataTrans
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 删除单元格所在的行
   */
  initSelectionFilterSelectCellsStartWithKeywordDeleteRows() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsStartWithKeywordQueryData(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 仅保留单元格所在的行
   */
  initSelectionFilterSelectCellsStartWithKeywordKeepRows() {
    this.queryData(
      {
        data: this.getSelectionFilterSelectCellsStartWithKeywordQueryData(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 替换 > 替换刷选内容
   */
  initSelectionReplaceSelectionKeyword() {
    if (DataStore.tableSelectionInfo) {
      const columnName = DataStore.tableSelectionInfo
        ? DataStore.tableSelectionInfo.columnName
        : ''
      this.beforeColumns = DataStore.tableColumns.filter(
        (item) => item.name === columnName
      )
      if (DataStore.tableSelectionInfo.isMutiple) {
        const dataset = [] as Array<any>
        DataStore.tableSelectionInfo.rowIndexArray?.forEach((index) => {
          dataset.push(DataStore.tableData[index])
        })
        this.afterColumns = this.beforeColumns
        const selectionInfoArray = Object.values(
          DataStore.tableSelectionInfo?.mutipleSelectionInfo || {}
        )
        this.dataset = [] as Array<any>
        this.afterDataset = dataset.map((item, index) => {
          const value = [null, undefined].includes(item[`${columnName}`])
            ? ''
            : (item[`${columnName}`] as string)
          this.dataset.push({
            ...item,
            [`${columnName}`]: value.replace(
              selectionInfoArray[index].selection,
              `<span class="word">${
                [null, '', undefined].includes(
                  selectionInfoArray[index].selection
                )
                  ? 'null'
                  : selectionInfoArray[index].selection
              }</span>`
            ),
          })
          return {
            ...item,
            [`${columnName}`]: value.replaceAll(
              selectionInfoArray[index].selection,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionReplaceKeyword)
                  ? 'null'
                  : this.selectionReplaceKeyword
              }</span>`
            ),
          }
        })
      } else {
        const dataset = [
          DataStore.tableData[DataStore.tableSelectionInfo.rowIndex],
        ]
        this.afterColumns = this.beforeColumns
        this.dataset = [] as Array<any>
        this.afterDataset = dataset.map((item) => {
          const value = [null, undefined].includes(item[`${columnName}`])
            ? ''
            : (item[`${columnName}`] as string)
          this.dataset.push({
            ...item,
            [`${columnName}`]: value.replace(
              this.selectionkeyword,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionkeyword)
                  ? 'null'
                  : this.selectionkeyword
              }</span>`
            ),
          })
          return {
            ...item,
            [`${columnName}`]: value.replaceAll(
              this.selectionkeyword,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionReplaceKeyword)
                  ? 'null'
                  : this.selectionReplaceKeyword
              }</span>`
            ),
          }
        })
      }
    }
  }

  /**
   * 单元格文字选中 > 替换 > 替换刷选内容 (需要兼容多刷)
   */
  initSelectionCellsReset() {
    if (DataStore.tableSelectionInfo) {
      const columnName = DataStore.tableSelectionInfo
        ? DataStore.tableSelectionInfo.columnName
        : ''
      this.beforeColumns = DataStore.tableColumns.filter(
        (item) => item.name === columnName
      )
      const aftervalue = [null, '', undefined].includes(
        this.selectionReplaceValue
      )
        ? 'null'
        : this.selectionReplaceValue
      if (DataStore.tableSelectionInfo.isMutiple) {
        const dataset = [] as Array<any>
        DataStore.tableSelectionInfo.rowIndexArray?.forEach((index) => {
          dataset.push(DataStore.tableData[index])
        })
        this.afterColumns = this.beforeColumns
        const selectionInfoArray = Object.values(
          DataStore.tableSelectionInfo?.mutipleSelectionInfo || {}
        )
        this.afterDataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: aftervalue,
          }
        })
        this.dataset = dataset.map((item, index) => {
          const value = [null, undefined].includes(item[`${columnName}`])
            ? ''
            : (item[`${columnName}`] as string)
          return {
            ...item,
            [`${columnName}`]: value.replace(
              selectionInfoArray[index].selection,
              `<span class="word">${
                [null, '', undefined].includes(
                  selectionInfoArray[index].selection
                )
                  ? 'null'
                  : selectionInfoArray[index].selection
              }</span>`
            ),
          }
        })
      } else {
        const dataset = [
          DataStore.tableData[DataStore.tableSelectionInfo.rowIndex],
        ]
        this.afterColumns = this.beforeColumns
        this.afterDataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: aftervalue,
          }
        })
        this.dataset = dataset.map((item) => {
          const value = [null, undefined].includes(item[`${columnName}`])
            ? ''
            : (item[`${columnName}`] as string)
          return {
            ...item,
            [`${columnName}`]: value.replace(
              this.selectionkeyword,
              `<span class="word">${
                [null, '', undefined].includes(this.selectionkeyword)
                  ? 'null'
                  : this.selectionkeyword
              }</span>`
            ),
          }
        })
      }
    }
  }

  /**
   * 获取查询参数
   */
  private getCellSamePositionQuery() {
    return {
      ...this.defaultQueryInfo(),
      data: {
        action: 'TRANSFORM_KEEP',
        col: DataStore.tableSelectionInfo?.columnName,
        transformType: 'POSITION',
        cursorStart: DataStore.tableSelectionInfo?.startIndex || 0,
        cursorEnd: DataStore.tableSelectionInfo?.endIndex || 0,
        table: this.currentHistory
          ? this.currentHistory.data.table
          : (this.selectNode.data.output[0] || {}).tableName,
        id: this.selectNode.id,
      },
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容位置一致的内容
   */
  initSelectionFilterSelectCellsSamePosSelection() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
        if (tableSelectionInfo) {
          this.columns = DataStore.tableColumns.filter(
            (item) => item.name === tableSelectionInfo.columnName
          )
          this.dataset = response.data.result.data as Array<any>
        }
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 >选出与刷选内容位置一致的内容 > 替换刷选内容
   */
  initSelectionFilterSelectCellsSamePosSelectionReplaceKeyword() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
        if (tableSelectionInfo) {
          this.beforeColumns = DataStore.tableColumns.filter((column) => {
            return column.name === DataStore.tableSelectionInfo?.columnName
          })
          this.afterColumns = cloneDeep(this.beforeColumns)
          const columnName = tableSelectionInfo.columnName as string
          const dataset = (response.data.result.data || []) as Array<any>
          this.afterColumns = this.beforeColumns
          const afterDataset = [] as Array<any>
          const replaceKeyword = ['', null, undefined].includes(
            this.selectionReplaceKeyword
          )
            ? 'null'
            : this.selectionReplaceKeyword
          this.dataset = dataset.map((item) => {
            const valueSet = [undefined, null].includes(item[`${columnName}`])
              ? ''
              : item[`${columnName}`]
            afterDataset.push({
              ...item,
              [`${columnName}`]: `${valueSet.slice(
                0,
                tableSelectionInfo.startIndex
              )}<span class="word">${replaceKeyword}</span>${valueSet.slice(
                tableSelectionInfo.endIndex,
                valueSet.length
              )}`,
            })
            return {
              ...item,
              [`${columnName}`]: `${valueSet.slice(
                0,
                tableSelectionInfo.startIndex
              )}<span class="word">${valueSet.slice(
                tableSelectionInfo.startIndex,
                tableSelectionInfo.endIndex
              )}</span>${
                tableSelectionInfo.endIndex < valueSet.length - 1
                  ? valueSet.slice(tableSelectionInfo.endIndex, valueSet.length)
                  : ''
              }`,
            }
          })
          this.afterDataset = afterDataset
          this.cellMode = ''
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 >选出与刷选内容位置一致的内容 > 替换单元格内容
   */
  initSelectionFilterSelectCellsSamePosSelectionReplaceContent() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const dataset = response.data.result.data as Array<any>
        const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
        const columnName = tableSelectionInfo.columnName as string
        if (tableSelectionInfo) {
          this.dataset = dataset.map((item) => {
            const valueSet = [undefined, null].includes(item[`${columnName}`])
              ? ''
              : item[`${columnName}`]
            return {
              ...item,
              [`${columnName}`]: `${valueSet.slice(
                0,
                tableSelectionInfo.startIndex
              )}<span class="word">${valueSet.slice(
                tableSelectionInfo.startIndex,
                tableSelectionInfo.endIndex
              )}</span>${
                tableSelectionInfo.endIndex < valueSet.length - 1
                  ? valueSet.slice(tableSelectionInfo.endIndex, valueSet.length)
                  : ''
              }`,
            }
          })
          this.afterDataset = this.dataset.map((item) => {
            return {
              ...item,
              [columnName]: this.selectionReplaceValue,
            }
          })
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 >选出与刷选内容位置一致的内容 > 抽取出一列
   */
  initSelectionFilterSelectCellsSamePosSelectionExtractColumn() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        const selectionInfo = DataStore.tableSelectionInfo as SelectionInfo
        const newColumnName = DataStore.tableExtractColumnName
          ? DataStore.tableExtractColumnName
          : this.getExtColumnName(
              DataStore.tableSelectionInfo?.columnName || ''
            )
        this.afterColumns = cloneDeep(this.beforeColumns)
        this.afterColumns.push({
          name: newColumnName,
          desc: 'varchar',
          type: -1,
        })
        const columnName = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        const dataset = (response.data.result.data || []) as Array<any>
        const afterDataset = [] as Array<any>
        this.dataset = dataset.map((item) => {
          const valueSet = [null, '', undefined].includes(item[columnName])
            ? ''
            : (item[columnName] as string)
          const stringExtract = valueSet.slice(
            selectionInfo.startIndex,
            selectionInfo.endIndex
          )
          const beforeValue = `${valueSet.slice(
            0,
            selectionInfo.startIndex
          )}<span class="word">${valueSet.slice(
            selectionInfo.startIndex,
            selectionInfo.endIndex
          )}</span>${
            selectionInfo.endIndex < valueSet.length - 1
              ? valueSet.slice(selectionInfo.endIndex, valueSet.length)
              : ''
          }`
          afterDataset.push({
            ...item,
            [`${columnName}`]: beforeValue,
            [`${newColumnName}`]: stringExtract,
          })
          return {
            ...item,
            [`${columnName}`]: beforeValue,
          }
        })
        this.afterDataset = afterDataset
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 >选出与刷选内容位置一致的内容 > 拆分成多列
   */
  initSelectionFilterSelectCellsSamePosSelectionSplitColumns() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
        if (tableSelectionInfo) {
          this.beforeColumns = DataStore.tableColumns.filter((column) => {
            return column.name === tableSelectionInfo.columnName
          })
          this.afterColumns = cloneDeep(this.beforeColumns)
          const columnName = tableSelectionInfo.columnName as string
          const newColumnName = DataStore.tableSplitInfo?.newCol
            ? DataStore.tableSplitInfo?.newCol
            : [this.getExtColumnName(this.afterColumns[0].name)]
          const dataSet = response.data.result.data as Array<any>
          const columnOrigin = tableSelectionInfo.columnName || ''
          const dataSetBefore = [] as Array<any>
          this.afterDataset = dataSet.map((dataItem) => {
            const valueSet = [null, '', undefined].includes(
              dataItem[columnOrigin]
            )
              ? ''
              : (dataItem[columnOrigin] as string)
            const splitString = valueSet.slice(
              tableSelectionInfo.startIndex,
              tableSelectionInfo.endIndex
            )
            const splitArray = valueSet.split(splitString)
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            dataSetBefore.push({
              ...dataItem,
              [columnName]: value.replace(
                splitString,
                `<span class="word">${splitString}</span>`
              ),
            })
            newColumnName.forEach((colName: string, index: number) => {
              dataItem[colName] = [null, undefined].includes(
                splitArray[index] as any
              )
                ? 'null'
                : (splitArray[index] as string)
            })
            return dataItem
          })
          this.dataset = dataSetBefore
          newColumnName.forEach((colName: string) => {
            this.afterColumns.push({
              name: colName,
              desc: 'varchar',
              type: -1,
            })
          })
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 >选出与刷选内容位置一致的内容 > 删除所选行
   */
  initSelectionFilterSelectCellsSamePosSelectionDeleteRows() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 >选出与刷选内容位置一致的内容 > 仅保留所选行
   */
  initSelectionFilterSelectCellsSamePosSelectionKeepRows() {
    this.queryData(
      {
        data: this.getCellSamePositionQuery(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 获取列内容匹配查询数据
   */
  private getColumnFilterContainsQuery() {
    return {
      curPage: 1,
      name: '_record_id_',
      pageSize: 5,
      filter: [
        [
          {
            col: DataStore.tableSelectColumns[0].name,
            values: DataStore.tableValueContains
              ? DataStore.tableValueContains.map((value) =>
                  isNull(value) ? '#NULL' : value
                )
              : [],
            filterType: '=',
          },
        ],
      ],
      table: this.currentHistory
        ? this.currentHistory.data.table
        : (this.selectNode.data.output[0] || {}).tableName,
      taskId: this.selectNode.id,
    }
  }

  /**
   * 列操作，筛选面板 > 选出值为xxx的单元格
   */
  initColumnFilterContains() {
    this.queryData(
      {
        data: this.getColumnFilterContainsQuery(),
      },
      (response: any) => {
        this.columns = DataStore.tableSelectColumns
        this.dataset = response.data.result.data
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 列操作，筛选面板 > 选出值为xxx的单元格 > 重新赋值
   */
  initColumnFilterContainsReset() {
    this.queryData(
      {
        data: this.getColumnFilterContainsQuery(),
      },
      (response: any) => {
        const dataset = response.data.result.data
        const columns = DataStore.tableSelectColumns
        const columnName = columns[0].name
        this.beforeColumns = columns
        this.afterColumns = columns
        this.dataset = dataset
        this.afterDataset = this.dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: DataStore.columnFilterSelectNullCellsResetValue,
          }
        })
        this.cellMode = ''
      }
    )
  }

  /**
   * bar操作 > 选出值为xxx的单元格 > 重新赋值
   */
  initMapDataBarSelectReset() {
    const columnName = DataStore.columnFilters[0][0]?.col
    this.beforeColumns = [
      {
        name: columnName,
      },
    ]
    this.afterColumns = [
      {
        name: columnName,
      },
    ]
    this.dataset = [
      {
        [`${columnName}`]: DataStore.columnFilters[0][0]?.values[0],
      },
    ]
    this.afterDataset = [
      {
        [`${columnName}`]: DataStore.MapDataReplaveValue,
      },
    ]
    this.cellMode = ''
  }

  /**
   * 列操作，筛选面板 > 选出值为xxx的单元格 > 删除所选单元格所在的行
   */
  initColumnFilterContainsDeleteRows() {
    this.queryData(
      {
        data: this.getColumnFilterContainsQuery(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  /**
   * 列操作，筛选面板 > 选出值为xxx的单元格 > 仅保留所选单元格所在的行
   */
  initColumnFilterContainsKeepRows() {
    this.queryData(
      {
        data: this.getColumnFilterContainsQuery(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 获取列数值对比查询参数
   */
  private getColumnCompareQuery() {
    return {
      ...this.defaultQueryInfo(),
      filter: [
        [
          {
            col: DataStore.tableSelectColumns[0].name,
            filterType: DataStore.vrCompareInfo?.compareMode,
            values: [
              DataStore.vrCompareInfo
                ? DataStore.vrCompareInfo.delimiter
                : '#NULL',
            ],
          },
        ],
      ],
    }
  }

  /**
   * 通用列Compare数据查询
   */
  private syncColumnCompareData(callback: Function) {
    this.queryData(
      {
        data: this.getColumnCompareQuery(),
      },
      callback
    )
  }

  /**
   * 列操作，筛选面板 > 比较运算符
   */
  initColumnFilterCompare() {
    this.syncColumnCompareData((response: any) => {
      this.columns = DataStore.tableSelectColumns
      this.dataset = response.data.result.data
      this.cellMode = 'sel-all'
    })
  }

  /**
   * 列操作，筛选面板 > 比较运算符 > 重新赋值
   */
  initColumnFilterCompareReset() {
    this.syncColumnCompareData((response: any) => {
      const dataset = response.data.result.data
      const columns = DataStore.tableSelectColumns
      const columnName = columns[0].name
      this.beforeColumns = columns
      this.afterColumns = columns
      this.dataset = dataset
      this.afterDataset = this.dataset.map((item) => {
        return {
          ...item,
          [`${columnName}`]: DataStore.columnFilterSelectNullCellsResetValue,
        }
      })
      this.cellMode = ''
    })
  }

  /**
   * 列操作，筛选面板 > 比较运算符 > 删除单元格所在的行
   */
  initColumnFilterCompareDeleteRows() {
    this.syncColumnCompareData((response: any) => {
      this.bindDataDeleteRowsCommon(response)
    })
  }

  /**
   * 列操作，筛选面板 > 比较运算符 > 仅保留单元格所在的行
   */
  initColumnFilterCompareKeepRows() {
    this.syncColumnCompareData((response: any) => {
      this.bindDataKeepRowsCommon(response)
    })
  }

  /**
   * 获取列range查询参数
   */
  private getColumnFilterRangeParams() {
    return {
      ...this.defaultQueryInfo(),
      filter: [
        [
          {
            col: DataStore.tableSelectColumns[0].name,
            filterType: '[a,b]',
            values: DataStore.vrRangeInfo || [0, 0],
          },
        ],
      ],
    }
  }

  /**
   * 列range通用查询
   */
  private syncColumnFilterRangeData(callback: Function) {
    this.queryData(
      {
        data: this.getColumnFilterRangeParams(),
      },
      callback
    )
  }

  /**
   * 列操作，筛选面板 > 范围筛选
   */
  initColumnFilterRange() {
    this.syncColumnFilterRangeData((response: any) => {
      this.columns = DataStore.tableSelectColumns
      this.dataset = response.data.result.data
      this.cellMode = 'sel-all'
    })
  }

  /**
   * 列操作，筛选面板 > 范围筛选 > 重置单元格内容
   */
  initColumnFilterRangeReset() {
    this.syncColumnFilterRangeData((response: any) => {
      const dataset = response.data.result.data
      const columns = DataStore.tableSelectColumns
      const columnName = columns[0].name
      this.beforeColumns = columns
      this.afterColumns = columns
      this.dataset = dataset
      this.afterDataset = this.dataset.map((item) => {
        return {
          ...item,
          [`${columnName}`]: DataStore.columnFilterSelectNullCellsResetValue,
        }
      })
      this.cellMode = ''
    })
  }

  /**
   * 列操作，筛选面板 > 范围筛选 > 删除单元格所在的行
   */
  initColumnFilterRangeDeleteRows() {
    this.syncColumnFilterRangeData((response: any) => {
      this.bindDataDeleteRowsCommon(response)
    })
  }

  /**
   * 操作，筛选面板 > 范围筛选 > 仅保留单元格所在的行
   */
  initColumnFilterRangeKeepRows() {
    this.syncColumnFilterRangeData((response: any) => {
      this.bindDataKeepRowsCommon(response)
    })
  }

  private getSelectionSamePosWordQueryData() {
    return {
      ...this.defaultQueryInfo(),
      data: {
        action: 'TRANSFORM_KEEP',
        col: DataStore.tableSelectionInfo?.columnName,
        transformType: 'WORD_POSITION',
        wordIndex: DataStore.tableSelectionInfo?.wordPos,
      },
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容
   */
  initSelectionFilterSelectCellsSamePosWord() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.columns = DataStore.tableColumns.filter((item) => {
          return item.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = response.data.result.data
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容 > 替换选中内容
   */
  initSelectionFilterSelectCellsSamePosWordReplaceKeyword() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const columnName = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        const dataset = (response.data.result.data || []) as Array<any>
        this.afterColumns = this.beforeColumns
        const wordPos = DataStore.tableSelectionInfo?.wordPos
          ? DataStore.tableSelectionInfo?.wordPos - 1
          : -1
        this.dataset = dataset.map((item) => {
          const splitArray: Array<string> =
            item[`${columnName}`] !== '' ? item[`${columnName}`].split(' ') : []
          const beforeValue = splitArray.map(
            (currentValue: string, index: number) => {
              return index === wordPos
                ? `<span class="word">${
                    [null, '', undefined].includes(currentValue)
                      ? 'null'
                      : currentValue
                  }</span>`
                : currentValue
            }
          )
          return {
            ...item,
            [`${columnName}`]: beforeValue.join(' '),
          }
        })
        this.afterDataset = dataset.map((item) => {
          const splitArray: Array<string> =
            item[`${columnName}`] !== '' ? item[`${columnName}`].split(' ') : []
          const afterValue = splitArray.map(
            (currentValue: string, index: number) => {
              return index === wordPos
                ? `<span class="word">${
                    [null, '', undefined].includes(this.selectionReplaceKeyword)
                      ? 'null'
                      : this.selectionReplaceKeyword
                  }</span>`
                : currentValue
            }
          )
          return {
            ...item,
            [`${columnName}`]: afterValue.join(' '),
          }
        })
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容 > 重置选中内容所在的单元格
   */
  initSelectionFilterSelectCellsSamePosWordReplaceContent() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        this.afterColumns = cloneDeep(this.beforeColumns)
        const columnName = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        const dataset = (response.data.result.data || []) as Array<any>
        this.afterColumns = this.beforeColumns
        const wordPos = DataStore.tableSelectionInfo?.wordPos
          ? DataStore.tableSelectionInfo?.wordPos - 1
          : -1
        this.dataset = dataset.map((item) => {
          const splitArray: Array<string> =
            item[`${columnName}`] !== '' ? item[`${columnName}`].split(' ') : []
          const beforeValue = splitArray.map(
            (currentValue: string, index: number) => {
              return index === wordPos
                ? `<span class="word">${
                    [null, '', undefined].includes(currentValue)
                      ? 'null'
                      : currentValue
                  }</span>`
                : currentValue
            }
          )
          return {
            ...item,
            [`${columnName}`]: beforeValue.join(' '),
          }
        })
        this.afterDataset = dataset.map((item) => {
          return {
            ...item,
            [`${columnName}`]: [null, '', undefined].includes(
              this.selectionReplaceValue
            )
              ? 'null'
              : this.selectionReplaceValue,
          }
        })
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容 > 将选中内容导出为一列
   */
  initSelectionFilterSelectCellsSamePosWordExtractColumn() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        const newColumnName = DataStore.tableExtractColumnName
          ? DataStore.tableExtractColumnName
          : this.getExtColumnName(
              DataStore.tableSelectionInfo?.columnName || ''
            )
        this.afterColumns = cloneDeep(this.beforeColumns)
        this.afterColumns.push({
          name: newColumnName,
          desc: 'varchar',
          type: -1,
        })
        const columnName = DataStore.tableSelectionInfo
          ? DataStore.tableSelectionInfo.columnName
          : ''
        const dataset = (response.data.result.data || []) as Array<any>
        const wordPos = DataStore.tableSelectionInfo?.wordPos
          ? DataStore.tableSelectionInfo?.wordPos - 1
          : -1
        const afterDataset = [] as Array<any>
        this.dataset = dataset.map((item) => {
          const splitArray: Array<string> =
            item[`${columnName}`] !== '' ? item[`${columnName}`].split(' ') : []
          const beforeValue = splitArray.map(
            (currentValue: string, index: number) => {
              return index === wordPos
                ? `<span class="word">${
                    [null, '', undefined].includes(currentValue)
                      ? 'null'
                      : currentValue
                  }</span>`
                : currentValue
            }
          )
          afterDataset.push({
            ...item,
            [`${newColumnName}`]: [null, '', undefined].includes(
              splitArray[wordPos]
            )
              ? 'null'
              : splitArray[wordPos],
          })
          return {
            ...item,
            [`${columnName}`]: beforeValue.join(' '),
            [`${newColumnName}`]: [null, '', undefined].includes(
              splitArray[wordPos]
            )
              ? 'null'
              : splitArray[wordPos],
          }
        })
        this.afterDataset = afterDataset
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容 > 根据选中内容拆分成多列
   */
  initSelectionFilterSelectCellsSamePosWordSplitColumns() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.beforeColumns = DataStore.tableColumns.filter((column) => {
          return column.name === DataStore.tableSelectionInfo?.columnName
        })
        const originColumnName = DataStore.tableSelectionInfo?.columnName || ''
        this.afterColumns = cloneDeep(this.beforeColumns)
        const newColumnName = DataStore.tableSplitInfo?.newCol
          ? DataStore.tableSplitInfo?.newCol
          : [this.getExtColumnName(this.afterColumns[0].name)]
        const dataSet = response.data.result.data as Array<any>
        const columnOrigin = DataStore.tableSelectionInfo?.columnName || ''
        const wordPos = DataStore.tableSelectionInfo?.wordPos
          ? DataStore.tableSelectionInfo?.wordPos - 1
          : -1
        const dataSetBefore = [] as Array<any>
        const columnName = DataStore.tableSelectionInfo?.columnName || ''
        dataSet.forEach((dataItem) => {
          // 先按照空格split
          const splitWhiteSpaceArray = [null, undefined, ''].includes(
            dataItem[originColumnName]
          )
            ? []
            : (dataItem[originColumnName] as string).split(' ')
          // 根据单词位置获取当前行的splitString
          const splitString = splitWhiteSpaceArray[wordPos] || ''
          const value = [null, undefined].includes(dataItem[columnName])
            ? ''
            : (dataItem[columnName] as string)
          dataSetBefore.push({
            ...dataItem,
            [columnName]: value.replace(
              splitString,
              `<span class="word">${splitString}</span>`
            ),
          })
          // 获取按照拆分字符的split数组
          const splitArray = `${dataItem[columnOrigin]}`.split(splitString)
          newColumnName.forEach((colName: string, index: number) => {
            dataItem[colName] = splitArray[index] || ''
          })
        })
        this.dataset = dataSetBefore
        this.afterDataset = dataSet
        newColumnName.forEach((colName: string) => {
          this.afterColumns.push({
            name: colName,
            desc: 'varchar',
            type: -1,
          })
        })
        this.cellMode = 'ext'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容 > 删除选中内容所在的行
   */
  initSelectionFilterSelectCellsSamePosWordDeleteRows() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出与刷选内容单词位置一致的内容 > 仅保留选中内容所在的行
   */
  initSelectionFilterSelectCellsSamePosWordKeepRows() {
    this.queryData(
      {
        data: this.getSelectionSamePosWordQueryData(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 获取选择xxx单词之后的内容查询参数
   */
  private getselectionFilterSelectCellsStartWithSameWordQueyData() {
    return {
      ...this.defaultQueryInfo(),
      data: {
        action: 'TRANSFORM_KEEP',
        col: DataStore.tableSelectionInfo?.columnName,
        transformType: 'AFTER_BEFORE',
        after: DataStore.tableSelectionInfo?.isStartWithWord
          ? DataStore.tableSelectionInfo?.startWithWord
          : null,
        before: null, // DataStore.tableSelectionInfo?.isEndWithWord? DataStore.tableSelectionInfo?.endWithword : null,
      },
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 选出首部为xxx的单元格 >
   */
  initSelectionFilterSelectCellsStartWithSameWord() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        this.columns = DataStore.tableColumns.filter((item) => {
          return item.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = response.data.result.data
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出首部为xxx的单元格 > 替换关键字
   */
  initSelectionFilterSelectCellsStartWithSameWordReplaceKeyword() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 关键字要替换的目标字符串
          const selectionReplaceKeyword = [null, undefined, ''].includes(
            this.selectionReplaceKeyword
          )
            ? 'null'
            : this.selectionReplaceKeyword
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            const splitString = value.startsWith(
              `${tableSelectionInfo.startWithWord} `
            )
              ? `${tableSelectionInfo.startWithWord} `
              : ` ${tableSelectionInfo.startWithWord} `
            const regExp = new RegExp(`(${splitString})(\\S+)`)
            afterDataset.push({
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                `$1<span class="word">${selectionReplaceKeyword}</span>`
              ),
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '$1<span class="word">$2</span>'
              ),
            }
          })
          this.afterDataset = afterDataset
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出首部为xxx的单元格 > 为单元格重新赋值
   */
  initSelectionFilterSelectCellsStartWithSameWordReplaceContent() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 关键字要替换的目标字符串
          const selectionReplaceValue = [null, undefined, ''].includes(
            this.selectionReplaceValue
          )
            ? 'null'
            : this.selectionReplaceValue
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            const splitString = value.startsWith(
              `${tableSelectionInfo.startWithWord} `
            )
              ? `${tableSelectionInfo.startWithWord} `
              : ` ${tableSelectionInfo.startWithWord} `
            const regExp = new RegExp(`(${splitString})(\\S+)`)
            afterDataset.push({
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                `$1<span class="word">${selectionReplaceValue}</span>`
              ),
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '$1<span class="word">$2</span>'
              ),
            }
          })
          this.afterDataset = afterDataset
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出前面为word的单元格 > 抽取刷选内容为一列
   */
  initSelectionFilterSelectCellsStartWithSameWordExtractColumn() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const newColumnName = DataStore.tableExtractColumnName
            ? DataStore.tableExtractColumnName
            : this.getExtColumnName(this.afterColumns[0].name)
          this.afterColumns.push({
            name: newColumnName,
            desc: 'varchar',
            type: -1,
          })
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 加上一个空格拆分
          const spliterString = `${tableSelectionInfo.startWithWord} `
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            // 拆分出目标字段
            const originBefore = value.split(spliterString)[0] || ''
            const originAfter = value.split(spliterString)[1] || ''
            let valueExtract: string = ''
            // 操作前
            const afterFix = originAfter
              .split(' ')
              .reduce((rec, item, currentIndex) => {
                if (currentIndex === 0) {
                  valueExtract = item
                }
                rec +=
                  currentIndex === 0
                    ? `<span class="word">${item}</span>&nbsp;`
                    : item
                return rec
              }, '')
            // 操作后数据，设置新列数据
            afterDataset.push({
              ...dataItem,
              [`${newColumnName}`]: valueExtract,
            })
            // 压入操作前集合中
            return {
              ...dataItem,
              [`${columnName}`]: `${originBefore}${tableSelectionInfo.startWithWord} ${afterFix}`,
            }
          })
          this.afterDataset = afterDataset
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出前面为word的单元格 > 根据刷选内容拆分为多列
   */
  initSelectionFilterSelectCellsStartWithSameWordSplitColumns() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const newColumnNames = DataStore.tableSplitInfo?.newCol
            ? DataStore.tableSplitInfo?.newCol
            : [this.getExtColumnName(this.afterColumns[0].name)]
          newColumnNames.forEach((newCol) => {
            this.afterColumns.push({
              name: newCol,
              desc: 'varchar',
              type: -1,
            })
          })
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 加上一个空格拆分
          const spliterString = `${tableSelectionInfo.startWithWord} `
          this.dataset = dataset.map((dataItem: any) => {
            const value = (dataItem[columnName] as string) || ''
            const regExp = new RegExp(`(${spliterString})(\\S+)`)
            const matchObject = value.match(regExp)
            let valueMath = ''
            if (matchObject) {
              valueMath = matchObject[0] as string
            }

            const valueSplit = valueMath.replace(regExp, '$2')
            const splitArray = value.split(valueSplit)
            const afterDatasetItem = { ...dataItem }
            newColumnNames.forEach((newCol, index) => {
              afterDatasetItem[newCol] = [null, '', undefined].includes(
                splitArray[index]
              )
                ? 'null'
                : splitArray[index]
            })
            afterDataset.push(afterDatasetItem)
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '$1<span class="word">$2</span>'
              ),
            }
          })
          this.afterDataset = afterDataset
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出前面为word的单元格 > 仅保留所选行
   */
  initSelectionFilterSelectCellsStartWithSameWordKeepRows() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 选出前面为word的单元格 > 删除所选行
   */
  initSelectionFilterSelectCellsStartWithSameWordDeleteRows() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithSameWordQueyData(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  /**
   *  单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 获取默认参数
   */
  private getselectionFilterSelectCellsEndWithSameWordQueryData() {
    return {
      ...this.defaultQueryInfo(),
      data: {
        action: 'TRANSFORM_KEEP',
        col: DataStore.tableSelectionInfo?.columnName,
        transformType: 'AFTER_BEFORE',
        after: null, // DataStore.tableSelectionInfo?.isStartWithWord? DataStore.tableSelectionInfo?.startWithWord : null,
        before: DataStore.tableSelectionInfo?.isEndWithWord
          ? DataStore.tableSelectionInfo?.endWithword
          : null,
      },
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词
   */
  initSelectionFilterSelectCellsEndWithSameWord() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        this.columns = DataStore.tableColumns.filter((item) => {
          return item.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = response.data.result.data
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 替换选中内容
   */
  initSelectionFilterSelectCellsEndWithSameWordReplaceKeyword() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 关键字要替换的目标字符串
          const selectionReplaceKeyword = [null, undefined, ''].includes(
            this.selectionReplaceKeyword
          )
            ? 'null'
            : this.selectionReplaceKeyword
          const regExp = new RegExp(
            `(\\S+)(\\s${tableSelectionInfo.endWithword})(\\s|$)`
          )
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined, ''].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            afterDataset.push({
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                `<span class="word">${selectionReplaceKeyword}</span>$2$3`
              ),
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '<span class="word">$1</span>$2$3'
              ),
            }
          })
          this.afterDataset = afterDataset
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 为单元格重新赋值
   */
  initSelectionFilterSelectCellsEndWithSameWordReplaceContent() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 关键字要替换的目标字符串
          const selectionReplaceValue = [null, undefined, ''].includes(
            this.selectionReplaceValue
          )
            ? 'null'
            : this.selectionReplaceValue
          const regExp = new RegExp(
            `(\\S+)(\\s${tableSelectionInfo.endWithword})(\\s|$)`
          )
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined, ''].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            afterDataset.push({
              ...dataItem,
              [`${columnName}`]: regExp.test(value)
                ? selectionReplaceValue
                : value,
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '<span class="word">$1</span>$2$3'
              ),
            }
          })
          this.afterDataset = afterDataset
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 将刷选内容拆分出一列
   */
  initSelectionFilterSelectCellsEndWithSameWordExtractColumn() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const newColumnName = DataStore.tableExtractColumnName
            ? DataStore.tableExtractColumnName
            : this.getExtColumnName(this.afterColumns[0].name)
          this.afterColumns.push({
            name: newColumnName,
            desc: 'varchar',
            type: -1,
          })
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 加上一个空格拆分
          const spliterStringCommon = ` ${tableSelectionInfo.endWithword}`
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined, ''].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            const splitString = value.endsWith(spliterStringCommon)
              ? spliterStringCommon
              : ` ${tableSelectionInfo.endWithword} `
            const regExp = new RegExp(`(\\S+)(${splitString})`)
            const valueMatch = value.match(regExp)
            const afterValue = valueMatch ? valueMatch[0] : ''
            afterDataset.push({
              ...dataItem,
              [`${newColumnName}`]: afterValue.replace(regExp, '$1') || 'null',
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '<span class="word">$1</span>$2'
              ),
            }
          })
          this.afterDataset = afterDataset
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 将刷选内容拆分出一列
   */
  initSelectionFilterSelectCellsEndWithSameWordSplitColumns() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const newColumnNames = DataStore.tableSplitInfo?.newCol
            ? DataStore.tableSplitInfo?.newCol
            : [this.getExtColumnName(this.afterColumns[0].name)]
          newColumnNames.forEach((newCol) => {
            this.afterColumns.push({
              name: newCol,
              desc: 'varchar',
              type: -1,
            })
          })
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 加上一个空格拆分
          const spliterString = ` ${tableSelectionInfo.endWithword}`
          this.dataset = dataset.map((dataItem: any) => {
            const value = (dataItem[columnName] as string) || ''
            const regExp = new RegExp(`(\\S+)(${spliterString})`)
            let valueMatch = ''
            const matchObject: RegExpMatchArray | null = value.match(regExp)
            if (matchObject) {
              valueMatch = matchObject[0] as string
            }
            // 找到关键字
            const splitMatched = valueMatch.replace(regExp, '$1')
            const splitStringArrayAfter: Array<string> = value.split(
              splitMatched
            )
            const dataItemAfterDataset = { ...dataItem }
            newColumnNames.forEach((columnNameNewCol, index) => {
              dataItemAfterDataset[columnNameNewCol] = [
                null,
                '',
                undefined,
              ].includes(splitStringArrayAfter[index])
                ? 'null'
                : splitStringArrayAfter[index]
            })

            afterDataset.push(dataItemAfterDataset)
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '<span class="word">$1</span>$2'
              ),
            }
          })
          this.afterDataset = afterDataset
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 删除
   */
  initSelectionFilterSelectCellsEndWithSameWordDeleteRows() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          this.bindDataDeleteRowsCommon(response)
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，且前面有单词的单元格刷选出该单词 > 删除
   */
  initSelectionFilterSelectCellsEndWithSameWordKeepRows() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          this.bindDataKeepRowsCommon(response)
        }
      }
    )
  }

  private getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData() {
    return {
      ...this.defaultQueryInfo(),
      data: {
        action: 'TRANSFORM_KEEP',
        col: DataStore.tableSelectionInfo?.columnName,
        transformType: 'AFTER_BEFORE',
        after: DataStore.tableSelectionInfo?.isStartWithWord
          ? DataStore.tableSelectionInfo?.startWithWord
          : null,
        before: DataStore.tableSelectionInfo?.isEndWithWord
          ? DataStore.tableSelectionInfo?.endWithword
          : null,
      },
    }
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWord() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        this.columns = DataStore.tableColumns.filter((item) => {
          return item.name === DataStore.tableSelectionInfo?.columnName
        })
        this.dataset = response.data.result.data
        this.cellMode = 'sel-all'
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词 > 替换关键字
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWordReplaceKeyword() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 关键字要替换的目标字符串
          const selectionReplaceKeyword = [null, undefined, ''].includes(
            this.selectionReplaceKeyword
          )
            ? 'null'
            : this.selectionReplaceKeyword
          const regExp = new RegExp(
            `(^|\\s)(${tableSelectionInfo.startWithWord}\\s)(\\S+)(\\s${tableSelectionInfo.endWithword})(\\s|$)`
          )
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            afterDataset.push({
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                `$1$2<span class="word">${selectionReplaceKeyword}</span>$4$5`
              ),
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '$1$2<span class="word">$3</span>$4$5'
              ),
            }
          })
          this.afterDataset = afterDataset
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词 > 单元格内容重置
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWordReplaceContent() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          // 关键字要替换的目标字符串
          const selectionReplaceValue = [null, undefined, ''].includes(
            this.selectionReplaceValue
          )
            ? 'null'
            : this.selectionReplaceValue
          const regExp = new RegExp(
            `(^|\\s)(${tableSelectionInfo.startWithWord}\\s)(\\S+)(\\s${tableSelectionInfo.endWithword})(\\s|$)`
          )
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            afterDataset.push({
              ...dataItem,
              [`${columnName}`]: regExp.test(value)
                ? selectionReplaceValue
                : value,
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '$1$2<span class="word">$3</span>$4$5'
              ),
            }
          })
          this.afterDataset = afterDataset
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词 > 抽取出一列
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWordExtractColumn() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const newColumnName = DataStore.tableExtractColumnName
            ? DataStore.tableExtractColumnName
            : this.getExtColumnName(this.afterColumns[0].name)
          this.afterColumns.push({
            name: newColumnName,
            desc: 'varchar',
            type: -1,
          })
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          /* eslint-disable */
          const regExp = new RegExp(
            `(^|\\s)(${tableSelectionInfo.startWithWord}\\s)(\\S+)(\\s${tableSelectionInfo.endWithword})(\\s|$)`
          )
          this.dataset = dataset.map((dataItem: any) => {
            const value = [null, undefined].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            let valueExtract = ''
            const valueMath = value.match(regExp)
            if (valueMath !== null) {
              valueExtract = valueMath[0].replace(regExp, '$3')
            }
            afterDataset.push({
              ...dataItem,
              [`${newColumnName}`]: valueExtract,
            })
            return {
              ...dataItem,
              [`${columnName}`]: value.replace(
                regExp,
                '$1$2<span class="word">$3</span>$4$5'
              ),
            }
          })
          this.afterDataset = afterDataset
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词 > 拆分成多列
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWordSplitColumns() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        if (DataStore.tableSelectionInfo) {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const columnName = DataStore.tableSelectionInfo.columnName as string
          this.beforeColumns = DataStore.tableColumns.filter(
            (column) => column.name === columnName
          )
          this.afterColumns = cloneDeep(this.beforeColumns)
          const newColumnNames = DataStore.tableSplitInfo?.newCol
            ? DataStore.tableSplitInfo?.newCol
            : [this.getExtColumnName(this.afterColumns[0].name)]
          newColumnNames.forEach((newCol) => {
            this.afterColumns.push({
              name: newCol,
              desc: 'varchar',
              type: -1,
            })
          })
          const dataset = response.data.result.data
          const afterDataset = [] as Array<any>
          /* eslint-disable */
          const regExp = new RegExp(
            `(^|\\s)(${tableSelectionInfo.startWithWord}\\s)(\\S+)(\\s${tableSelectionInfo.endWithword})(\\s|$)`
          )
          this.dataset = dataset.map((dataItem: any) => {
            const value = [undefined, null].includes(dataItem[columnName])
              ? ''
              : (dataItem[columnName] as string)
            const valueRplacedBefore = value.replace(
              regExp,
              '$1$2<span class="word">$3</span>$4$5'
            )
            const valueMatch = value.match(regExp)
            let valueSplit = ''
            if (valueMatch !== null) {
              valueSplit = valueMatch[0].replace(regExp, '$3')
            }
            const valueSplitArray =
              valueSplit !== '' ? value.split(valueSplit) : [value]
            // 压入操作后集合中
            const dataItemAfter = { ...dataItem }
            // 如果匹配这
            newColumnNames.forEach((newCol, colIndex) => {
              dataItemAfter[newCol] = [null, '', undefined].includes(
                valueSplitArray[colIndex]
              )
                ? 'null'
                : valueSplitArray[colIndex]
            })
            afterDataset.push(dataItemAfter)
            // 压入操作前集合中
            return { ...dataItem, [`${columnName}`]: valueRplacedBefore }
          })
          this.afterDataset = afterDataset
          this.cellMode = 'ext'
        }
      }
    )
  }

  /**
   * 单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词 > 仅保留单词所在的行
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWordKeepRows() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        this.bindDataKeepRowsCommon(response)
      }
    )
  }

  /**
   *  单元格文字选中 > 筛选 > 包含xxx，yyy单词之间的单词 > 删除单词所在的行
   */
  initSelectionFilterSelectCellsStartWithAndEndWithSameWordDeleteRows() {
    this.queryData(
      {
        data: this.getselectionFilterSelectCellsStartWithAndEndWithSameWordQueryData(),
      },
      (response: any) => {
        this.bindDataDeleteRowsCommon(response)
      }
    )
  }

  // 2021.7 刷选json/array  智能推荐 --> 数据清洗 --> json/array解析推荐 结果预览
  /**
   * 获取数据
   */
  private getDataForJsonParse(callback: Function) {
    this.dataset = []
    // DataStore.tableData  // 存储有表数据
    const storeData = DataStore.tableData.filter((item, index) => {
      return index < 5
    })
    callback(storeData)
    // 从后端重新拿数据
    // this.queryData(
    //   {
    //     data: {
    //       ...this.defaultQueryInfo(),
    //       filter: [],
    //     },
    //   },
    //   (response: any) => {
    //     callback(response.data.result.data)
    //   }
    // )
  }

  /**
   * 单元格文字选中 > 解析对象
   */
  public initSelectionJsonParse() {
    this.getDataForJsonParse((data: any) => {
      const sourceSata = data // 源数据
      const selectCol: string | undefined =
        DataStore.tableSelectionInfo?.columnName
      const jsonKey: string | null = DataStore.currentSelectionJsonKey
      // 成功解析出 key
      if (jsonKey && selectCol) {
        this.dataset = sourceSata.map((dataItem: any) => {
          if (dataItem[selectCol]) {
            const jsonData: any = JSON.parse(dataItem[selectCol])
            return { [jsonKey]: jsonData[jsonKey] }
          }
        })
        this.cellMode = 'sel-all'
        this.columns = [
          {
            desc: 'text',
            name: jsonKey,
            semantic: null,
            type: -1,
            width: 450.5,
          },
        ]
      } else {
        this.dataset = []
        this.columns = []
      }
    })
  }

  /**
   * 单元格文字选中 > 数组对象
   */
  public initSelectionArrayParse() {
    this.getDataForJsonParse((data: any) => {
      const sourceSata = data // 源数据
      const selectCol: string | undefined =
        DataStore.tableSelectionInfo?.columnName // 当前列名
      const arrayIndex: number | null = DataStore.currentSelectionArrayIndex // 选择的索引
      // 成功解析出 arrayIndex
      if (arrayIndex && selectCol) {
        this.dataset = sourceSata.map((dataItem: any) => {
          if (dataItem[selectCol]) {
            const jsonData: any = JSON.parse(dataItem[selectCol])
            return { [`${selectCol}_${arrayIndex}`]: jsonData[arrayIndex - 1] }
          }
        })
        this.cellMode = 'sel-all'
        this.columns = [
          {
            desc: 'text',
            name: `${selectCol}_${arrayIndex}`,
            semantic: null,
            type: -1,
            width: 450.5,
          },
        ]
      } else {
        this.columns = []
        this.dataset = []
      }
    })
  }

  /**
   * 多列选中 > 嵌合对象
   */
  public initColumnsChimeraIntoJson() {
    this.beforeColumns = DataStore.tableSelectColumns
    this.afterColumns = [
      {
        name: DataStore.chimeraJsonNewColumnName,
        desc: 'json',
      },
    ]
    this.dataset = DataStore.tableData.slice(0, 5)
    this.afterDataset = this.dataset.map((item) => {
      const newCol: any = {}
      this.beforeColumns.forEach((itemColumn: any) => {
        if (itemColumn.desc === 'int' || itemColumn.desc === 'decimal') {
          newCol[itemColumn.name] = Number(item[itemColumn.name])
        } else {
          newCol[itemColumn.name] = item[itemColumn.name]
        }
      })
      return {
        [`${DataStore.chimeraJsonNewColumnName}`]: this.formatChimeraValue(
          JSON.stringify(newCol)
        ),
      }
    })
  }

  /**
   * 多列选中 > 嵌合数组
   */
  public initColumnsChimeraIntoArray() {
    this.beforeColumns = DataStore.tableSelectColumns
    this.afterColumns = [
      {
        name: DataStore.chimeraJsonNewColumnName,
        desc: 'array',
      },
    ]
    this.dataset = DataStore.tableData.slice(0, 5)
    this.afterDataset = this.dataset.map((item) => {
      const newCol: any = []
      this.beforeColumns.forEach((itemColumn: any) => {
        if (itemColumn.desc === 'int' || itemColumn.desc === 'decimal') {
          newCol.push(Number(item[itemColumn.name]))
        } else {
          newCol.push(item[itemColumn.name])
        }
      })
      return {
        [`${DataStore.chimeraJsonNewColumnName}`]: this.formatChimeraValue(
          JSON.stringify(newCol)
        ),
      }
    })
  }

  // 格式化数据结果
  formatChimeraValue(value: string) {
    return value
      .replaceAll('\\"', '"')
      .replaceAll('"{', '{')
      .replaceAll('}"', '}')
      .replaceAll('"[', '[')
      .replaceAll(']"', ']')
  }

  // 2021.7 end
}
</script>
<style lang="less" scoped>
@import url('./preview.less');
</style>

<style lang="css">
.ant-tooltip {
  pointer-events: none;
  z-index: 100000 !important;
}

/* 修复preview预览tooltip zindex 错误 */
.plTableTooltip {
  z-index: 100000 !important;
}
</style>
